<template>
  <div>
    <search-form @search="getTableData" @reset="clearSearch">
      <el-col :span="8" :xs="24" v-show="$permiss[1374]">
        <el-form-item :label="$t('所属租户')">
          <el-select style="width: 100%" v-model="page.tenantId" @change="tenantChange">
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" >
        <el-form-item :label="$t('APP名称')">
          <el-select style="width: 100%" v-model="page.productName" clearable>
            <el-option v-for="item in productList" :key="item.productId" :label="item.appName"
                       :value="item.productName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[1373]">
        <el-form-item :label="$t('客群名称')">
          <el-select style="width: 100%" v-model="page.guestGroupId">
            <el-option v-for="item in guestGroupList" :key="item.guestGroupId" :label="item.guestGroupName"
                       :value="item.guestGroupId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </search-form>
    <el-card shadow="never" style="margin-top: 10px">
      <el-tabs v-model="activeName" @tab-click="getTableData">
        <el-tab-pane :label="$t('订单业绩')" name="0">
          <Table :loading="loading" max-height="500" :page="false" :table-column="orderTableColumn"
                 :table-data="tableData"
          />
        </el-tab-pane>
        <el-tab-pane :label="$t('金额业绩')" name="1">
          <Table :loading="loading" max-height="500" :page="false" :table-column="amountTableColumn"
                 :table-data="tableData"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import {orderSplitDataList, guestGroupList} from '@/api/postLoan'
import {dateFormatSection} from "@/utils/tools";
import {selectProduct, selectTenant} from "@/api/system";

export default {
  name: "loanReportCollectionRealTime",
  data() {
    return {
      page: {},
      guestGroupList: [],
      exportsLoading: false,
      tenantList: [],
      collectionUser: [],
      tableData: [],
      activeName: '0',
      orderTableColumn: [
        {label: this.$t('排名'), prop: 'rownum', align: 'center', minWidth: 100, fixed: 'left'},
        {label: this.$t('客群'), prop: 'guest_group_name', align: 'center', minWidth: 100},
        {label: this.$t('姓名'), prop: 'admin_user_name', align: 'center', minWidth: 100},
        {label: this.$t('新增订单数'), prop: 'new_order', align: 'center', minWidth: 100},
        {label: this.$t('新增订单结清数'), prop: 'new_order_settle', align: 'center', minWidth: 120},
        {label: this.$t('新增订单结清率'), prop: 'new_order_settle_rate', align: 'center', minWidth: 120},
        {label: this.$t('总订单数'), prop: 'total_order', align: 'center', minWidth: 100},
        {label: this.$t('总订单结清数'), prop: 'total_order_settle', align: 'center', minWidth: 100},
        {label: this.$t('总订单结清率'), prop: 'total_order_settle_rate', align: 'center', minWidth: 100},
      ],
      amountTableColumn: [
        {label: this.$t('排名'), prop: 'rownum', align: 'center', minWidth: 100, fixed: 'left'},
        {label: this.$t('客群'), prop: 'guest_group_name', align: 'center', minWidth: 100},
        {label: this.$t('姓名'), prop: 'admin_user_name', align: 'center', minWidth: 100},
        {label: this.$t('新增金额'), prop: 'new_amount', align: 'center', minWidth: 100},
        {label: this.$t('新增金额催回'), prop: 'new_amount_recall', align: 'center', minWidth: 100},
        {label: this.$t('新增金额催回率'), prop: 'new_amount_recall_rate', align: 'center', minWidth: 120},
        {label: this.$t('总金额'), prop: 'total_amount', align: 'center', minWidth: 100},
        {label: this.$t('总金额催回'), prop: 'total_amount_recall', align: 'center', minWidth: 100},
        {label: this.$t('总金额催回率'), prop: 'total_amount_recall_rate', align: 'center', minWidth: 120},
      ],
      loading: false,
      productList:[]
    }
  },
  async mounted() {
    const p2 = await selectTenant().then(res => {
      this.tenantList = res.data
      if (this.tenantList.length > 0) this.$set(this.page, 'tenantId', this.tenantList[0].adminUserId)
    })
    // 获取客群名称
    const p1 = await guestGroupList({
      pageNum: 1,
      pageSize: 1000,
      type: 1,
      tenantId: this.page.tenantId
    }).then(res => {
      const {list} = res.data
      this.guestGroupList = list || []
      if (this.guestGroupList.length > 0) this.$set(this.page, 'guestGroupId', this.guestGroupList[0].guestGroupId)
    })
    selectProduct().then(res => {
      this.productList = res.data
    })
    Promise.all([p1, p2]).then(res => {
      this.getTableData()
    })

  },
  methods: {
    async getTableData() {
      this.loading = true
      const res = await orderSplitDataList({
        ...this.page,
        type: parseInt(this.activeName)
      })
      if (res.code === 1) {
        const {list, total} = res.data
        if (list && list.length > 0) {
          this.tableData = list.map((item) => {
            item.new_order_settle_rate = item.new_order_settle_rate + '%'
            item.total_order_settle_rate = item.total_order_settle_rate + '%'
            item.new_amount_recall_rate = item.new_amount_recall_rate + '%'
            item.total_amount_recall_rate = item.total_amount_recall_rate + '%'
            return item
          })
          this.tableData.unshift({...total, rownum: this.$t('合计')})
        } else {
          this.tableData = []
        }
        this.loading = false
      } else {
        this.loading = false
      }
    },
    tenantChange(value) {
      guestGroupList({
        pageNum: 1,
        pageSize: 1000,
        type: 1,
        tenantId: value
      }).then(res => {
        const {list} = res.data
        this.guestGroupList = list || []
      })
      selectProduct({adminUserId: value}).then(res => {
        this.productList = res.data
      })
    },
    clearSearch() {
      // this.page = {
      //   pageNum: 1,
      //   pageSize: 10,
      //   total: 0
      // }
      this.getTableData()
    }
  }
}
</script>

<style scoped>

</style>
